import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_changdian_football/pages/login/login_controller.dart';
import 'package:flutter_changdian_football/routers/app_routes.dart';
import 'package:flutter_changdian_football/utils/custom_constant.dart';
import 'package:flutter_changdian_football/utils/number_input_limit.dart';
import 'package:flutter_changdian_football/widget/screenutil/custom_screenutil.dart';
import 'package:get/get.dart';
import 'package:get/route_manager.dart';

/// 登录
class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xfff8faf9),
      body: GetBuilder<LoginController>(
        init: LoginController(),
        builder: (loginController) {
          return Stack(
            children: [
              SizedBox(
                width: double.infinity,
                height: 322.w,
                child: Image.asset('assets/images/img_dlbg.png'),
              ),

              SizedBox(
                width: double.infinity,
                child: Column(
                  children: [
                    Expanded(
                      child: SingleChildScrollView(
                        child: SafeArea(
                          child: Column(
                            children: [
                              SizedBox(height: 80.w,),
                              SizedBox(
                                width: 220.w,
                                child: Image.asset('assets/images/img_si.png'),
                              ),

                              SizedBox(height: 26.w,),

                              Container(
                                margin: EdgeInsets.symmetric(horizontal: 30.w),
                                width: double.infinity,
                                decoration: BoxDecoration(
                                  color: const Color(0xff499360).withOpacity(0.06),
                                  borderRadius: BorderRadius.circular(24.r)
                                ),
                                padding: EdgeInsets.all(5.w),
                                child: Container(
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(24.r)
                                  ),
                                  child: Column(
                                    children: [
                                      SizedBox(height: 28.w,),

                                      SizedBox(
                                        child: Text('登录', style: TextStyle(fontSize: 18.sp, color: const Color(0xff333333), fontWeight: FontWeight.w500),),
                                      ),

                                      SizedBox(height: 24.w,),

                                      Container(
                                        margin: EdgeInsets.symmetric(horizontal: 20.w),
                                        height: 40.w,
                                        child: TextField(
                                          keyboardType: TextInputType.phone,
                                          maxLength: 11,
                                          maxLines: 1,
                                          controller: loginController.phoneController,
                                          inputFormatters: [
                                            NumberInputLimit(
                                              digit: 0,
                                            )
                                          ],
                                          onChanged: (v) {
                                            loginController.changeSubmit();
                                          },
                                          decoration: InputDecoration(
                                            contentPadding: EdgeInsets.zero,
                                            border: OutlineInputBorder(
                                              borderRadius: BorderRadius.all(Radius.circular(20.r)),
                                              borderSide: BorderSide.none,
                                            ),
                                            filled: true,
                                            fillColor: const Color(0xffFAFAFA),
                                            prefixIcon: Container(
                                              padding: EdgeInsets.symmetric(horizontal: 12.w),
                                              child: Image.asset(
                                                'assets/images/img_in_sj.png',
                                                height: 20.w,
                                                width: 20.w,
                                              ),
                                            ),
                                            prefixIconConstraints: BoxConstraints(
                                              maxHeight: 24.w
                                            ),
                                            hintStyle: TextStyle(fontSize: 14.sp, color: const Color(0xffCCCCCC), height: 1.5),
                                            hintText: '输入手机号',
                                            counterText: '',
                                          ),
                                          style: TextStyle(fontSize: 14.sp, color: const Color(0xff333333), height: 1.5),
                                        ),
                                      ),


                                      SizedBox(height: 16.w,),



                                      Container(
                                        margin: EdgeInsets.symmetric(horizontal: 20.w),
                                        height: 40.w,
                                        decoration: BoxDecoration(
                                          color: const Color(0xfffafafa),
                                          borderRadius: BorderRadius.all(Radius.circular(20.r)),
                                        ),
                                        child: Row(
                                          children: [
                                            Expanded(
                                              child: TextField(
                                                keyboardType: TextInputType.phone,
                                                maxLength: 6,
                                                maxLines: 1,
                                                inputFormatters: [
                                                  NumberInputLimit(
                                                    digit: 0,
                                                  )
                                                ],
                                                onChanged: (v) {
                                                  loginController.changeSubmit();
                                                },
                                                controller: loginController.codeController,
                                                decoration: InputDecoration(
                                                  contentPadding: EdgeInsets.zero,
                                                  border: OutlineInputBorder(
                                                    borderRadius: BorderRadius.all(Radius.circular(20.r)),
                                                    borderSide: BorderSide.none,
                                                  ),
                                                  prefixIcon: Container(
                                                    padding: EdgeInsets.symmetric(horizontal: 12.w),
                                                    child: Image.asset(
                                                      'assets/images/imj_in_yzm.png',
                                                      height: 20.w,
                                                      width: 20.w,
                                                    ),
                                                  ),
                                                  prefixIconConstraints: BoxConstraints(
                                                    maxHeight: 24.w
                                                  ),
                                                  hintStyle: TextStyle(fontSize: 14.sp, color: const Color(0xffCCCCCC), height: 1.5),
                                                  hintText: '输入验证码',
                                                  counterText: '',
                                                ),
                                                style: TextStyle(fontSize: 14.sp, color: const Color(0xff333333), height: 1.5),
                                              ),
                                            ),

                                            GestureDetector(
                                              onTap: () {
                                                loginController.sendCode();
                                              },
                                              behavior: HitTestBehavior.translucent,
                                              child: Text(
                                                loginController.autoCodeText,
                                                style: TextStyle(fontSize: 14.sp, color: const Color(0xff499265)),
                                              ),
                                            ),

                                            SizedBox(width: 12.w,)
                                          ],
                                        ),
                                      ),


                                      SizedBox(height: 30.w,),

                                      Opacity(
                                        opacity: loginController.isSubmit ? 1.0 : 0.5,
                                        child: Container(
                                          margin: EdgeInsets.symmetric(horizontal: 20.w),
                                          child: GestureDetector(
                                            behavior: HitTestBehavior.translucent,
                                            onTap: () {
                                              loginController.login();
                                            },
                                            child: Container(
                                              decoration: BoxDecoration(
                                                boxShadow: [
                                                  BoxShadow(
                                                    color: const Color(0xff499360).withOpacity(0.16),
                                                    offset: const Offset(0, 6),
                                                    blurRadius: 12,
                                                  )
                                                ],
                                                gradient: const LinearGradient(
                                                  begin: Alignment(0.01, 0),
                                                  end: Alignment(1, 1),
                                                  colors: [
                                                    Color(0xff499360),
                                                    Color(0xff295651),
                                                  ],
                                                  stops: [0, 1.0],
                                                ),
                                                borderRadius: BorderRadius.circular(22.r)
                                              ),
                                              width: double.infinity,
                                              alignment: Alignment.center,
                                              padding: EdgeInsets.symmetric(vertical: 12.w),
                                              child: Text('登录', style: TextStyle(fontSize: 16.sp, color: Colors.white, fontWeight: FontWeight.w500),),
                                            ),
                                          ),
                                        ),
                                      ),

                                      SizedBox(height: 14.w,),

                                      GestureDetector(
                                        behavior: HitTestBehavior.translucent,
                                        onTap: () {
                                          loginController.changeAgree();
                                        },
                                        child: Row(
                                          mainAxisAlignment: MainAxisAlignment.center,
                                          children: [
                                            Container(
                                              width: 18.w,
                                              height: 18.w,
                                              decoration: BoxDecoration(
                                                border: Border.all(
                                                  width: 1.w, 
                                                  color: loginController.isAgree ? const Color(0xff499360) : const Color(0xffCCCCCC)
                                                ),
                                                color: loginController.isAgree ? const Color(0xff499360) : Colors.transparent,
                                                borderRadius: BorderRadius.circular(8.r)
                                              ),
                                              alignment: Alignment.center,
                                              child: loginController.isAgree ? SizedBox(
                                                child: Icon(Icons.check, size: 14.w, color: Colors.white,),
                                              ) : const SizedBox(),
                                            ),

                                            SizedBox(width: 6.w,),

                                            SizedBox(
                                              child: RichText(
                                                text: TextSpan(
                                                  children: [
                                                    TextSpan(
                                                      text: '我已阅读同意 畅点足球',
                                                      style: TextStyle(fontSize: 10.sp, color: const Color(0xff333333))
                                                    ),
                                                    TextSpan(
                                                      text: '《用户协议》',
                                                      style: TextStyle(fontSize: 10.sp, color: const Color(0xff499360)),
                                                      recognizer: TapGestureRecognizer()..onTap = () {
                                                        Get.toNamed(AppRoutes.inAppWebView, parameters: {
                                                          'title': '用户协议',
                                                          'type': CustomConstant.PRIVACY_AGREEMENT,
                                                        });
                                                      }
                                                    ),
                                                    TextSpan(
                                                      text: '和',
                                                      style: TextStyle(fontSize: 10.sp, color: const Color(0xff333333))
                                                    ),
                                                    TextSpan(
                                                      text: '《用户隐私政策》',
                                                      style: TextStyle(fontSize: 10.sp, color: const Color(0xff499360)),
                                                      recognizer: TapGestureRecognizer()..onTap = () {
                                                        Get.toNamed(AppRoutes.inAppWebView, parameters: {
                                                          'title': '服务协议',
                                                          'type': CustomConstant.TERMS_OF_SERVICE,
                                                        });
                                                      }
                                                    )
                                                  ]
                                                )
                                              ),
                                            )
                                          ],
                                        ),
                                      ),

                                      SizedBox(height: 20.w,),
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              )
            ],
          );
        }
      ),
    );
  }
}